import { View, Image } from "@tarojs/components";
import React, { useState, useEffect } from "react";
import Taro, { Config, getStorageSync, useDidShow } from "@tarojs/taro";
import { AtDivider, AtAvatar } from "taro-ui";
import family from "./image/family.jpg";
import right from "./image/right.png";
import love from "./image/love.png";
import port from "./image/port.png";
import edit from "./image/edit.png";
import col from "./image/collect.png";
import plan from "./image/plan.png";
import mama from "./image/mama.png";
import NavBar from "./fit";
import "./index.scss";

function My(props) {
  //跳转到登录页面
  const handleClick = () => {
    Taro.navigateTo({
      url: "/pages/my/register/login"
    });
  };

  const [userInfo_status, setUser] = useState({});
  const [data, setData] = useState({})
  useEffect(() => {
    const openid = Taro.getStorageSync("openid")
    const user = Taro.getStorageSync("userInfo")
    Taro.cloud.callFunction({
      name: "login",
      data: {
        $url: "findUser",
        openid: openid,
      }
    }).then(res => {
      console.log("返回的个人数据:", res.result)
      setData(res.result.res.data[0]);
    })
    setUser(user)
  }, [props]);

  console.log("data:", data)
  //宝爸宝妈
  const [list] = useState([
    {
      imgSrc: col,
      name: "我的收藏",
      url: "/pages/my/collection/collection"
    },
    {
      imgSrc: plan,
      name: "我的营养计划",
      url: "/pages/my/plan/look"
    },
    {
      imgSrc: love,
      name: "我的孕育信息",
      url: "/pages/my/infomation/infomation"
    },
    {
      imgSrc: port,
      name: "发表",
      url: "/pages/my/plan/port"
    },
    {
      imgSrc: edit,
      name: "编辑",
      url: "/pages/my/plan/edit"
    }
  ]);
  //宝爸宝妈
  const List = (data === undefined ? (list.slice(0, 3)): (data.occupation === "普通用户" ? list.slice(0, 3) : list)
  ).map(content => (
    <View>
      <View
        className="totle"
        onClick={() => Taro.navigateTo({ url: content.url })}
      >
        <View className="list">
          <View className="left">
            <Image className="img-style" src={content.imgSrc} />
            <View className="at-article">{content.name} </View>
          </View>
          <View className="right">
            <Image style="width:20px;height:20px" src={right} />
          </View>
        </View>
      </View>
    </View>
  ));

  // 用于判断用户是否登录
  const Avatar = () => {
    try {
      const user = Taro.getStorageSync("userInfo");
      console.log("my_index_User:", user);
      if (user) {
        return (
          <View className="tx">
            <AtAvatar circle size="large" image={user.avatarUrl} />
          </View>
        );
      } else {
        return (
          <View className="tx" onClick={handleClick}>
            <AtAvatar circle size="large" image="https://jdc.jd.com/img/200" />
          </View>
        );
      }
    } catch (e) {
      console.log(e);
    }
  };

  // 用于用户名的显示
  const Name = () => {
    // Avatar.call(this, user)
    try {
      const user = getStorageSync("userInfo");
      if (user) {
        return (
          <View className="z1">
            <View className="z11" style="algin-content:center;">
              {user.nickName}
            </View>
            <View className="z1tp">
              <Image style="width: 40px;height: 40px" src={mama} />
            </View>
          </View>
        );
      } else {
        return <View className="z12">未登录</View>;
      }
    } catch (e) {
      console.log(e);
    }
  };

  // const toBack = () => {
  //   Taro.navigateBack().then();
  // };
  // const toHome=()=>{
  //   Taro.redirectTo({url:"pages/index/index"}).then();
  // }

  return (
    <View className="box">
      <View className="aa">
        <NavBar
          title="我的"
          // color="#ffffff"
          back={true}
          // back={toBack}
          // home={true}
          // onHome={toHome}
        />

        <View className="box1">
          <View className="box11">{Avatar()}</View>
          <View className="box12">
            {/*<View className="z1">*/}
            {/* <View className="z11">昵称</View> */}
            {Name()}
            {/*<View className="z1tp">*/}
            {/*  <Image style="width: 40px;height: 40px" src={mama}/>*/}
            {/*</View>*/}
            {/*</View>*/}
            <AtDivider height="70" lineColor="#D7D6D3" />
            <View className="z2">
              <View className="z21">
                {/* <View className="z211">当前拥有的积分</View> */}
                {/* <View className="z212" onClick={handleClick3}>
                任务中心 <Image style="width:20px;height:20px" src={right1} />
              </View> */}
              </View>
              {/*<View className="z22">*/}
              {/*  <View className="z2tp">*/}
              {/*    <Image style="width: 30px;height: 30px" src={book}/>*/}
              {/*  </View>*/}
              {/*  <View className="ks">克数</View>*/}
              {/*</View>*/}
            </View>
          </View>
        </View>

      </View>

      <View className="box2">
        <View className="box21">
          <Image className="box211" src={family} />
        </View>
      </View>

      <View className="box3">{List}</View>
      {/* <View className="box3">
        {userInfo_status.occupation !== "普通用户" && List1}
      </View> */}
    </View>
  );
}

export default My;
